<template>
  <div class="feedback-container">
    <div class="feedback-header">
      <h2 class="text-3xl font-bold mb-2">意见反馈</h2>
      <p class="text-gray-600">您的每一条建议都是我们进步的动力</p>
    </div>

    <el-form 
      :model="form" 
      :rules="rules" 
      ref="formRef"
      class="feedback-form"
      label-position="top"
    >
      <el-form-item label="反馈类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择反馈类型" class="w-full">
          <el-option label="功能建议" value="feature" />
          <el-option label="问题反馈" value="bug" />
          <el-option label="内容建议" value="content" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>

      <el-form-item label="反馈内容" prop="content">
        <el-input
          type="textarea"
          v-model="form.content"
          :rows="6"
          placeholder="请详细描述您的建议或遇到的问题..."
          class="feedback-textarea"
        />
      </el-form-item>

      <el-form-item label="联系方式" prop="contact">
        <el-input 
          v-model="form.contact" 
          placeholder="请留下您的邮箱或手机号，方便我们及时回复"
        />
      </el-form-item>

      <el-form-item label="上传截图（选填）" prop="screenshot">
        <el-upload
          class="feedback-upload"
          action="#"
          :auto-upload="false"
          :limit="1"
          :on-change="handleFileChange"
        >
          <template #trigger>
            <el-button type="primary" plain>选择图片</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">
              支持 jpg/png 格式，大小不超过 2MB
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <div class="feedback-actions">
        <el-button type="primary" @click="submitFeedback" :loading="submitting">
          提交反馈
        </el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const formRef = ref();
const submitting = ref(false);
const form = ref({
  type: '',
  content: '',
  contact: '',
  screenshot: null
});

const rules = {
  type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 10, message: '反馈内容至少10个字符', trigger: 'blur' }
  ],
  contact: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$|^1[3-9]\d{9}$/, message: '请输入正确的邮箱或手机号', trigger: 'blur' }
  ]
};

const handleFileChange = (file) => {
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过2MB');
    return;
  }
  form.value.screenshot = file;
};

const resetForm = () => {
  formRef.value?.resetFields();
  form.value.screenshot = null;
};

const submitFeedback = async () => {
  if (!formRef.value) return;
  
  try {
    await formRef.value.validate();
    submitting.value = true;
    
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    ElMessage.success('感谢您的反馈！我们会尽快处理');
    resetForm();
  } catch (err) {
    console.error(err);
    ElMessage.error('提交失败，请检查表单内容');
  } finally {
    submitting.value = false;
  }
};
</script>

<style scoped>
.feedback-container {
  @apply p-6 max-w-3xl mx-auto;
  background-color: #f8f9fa;
  min-height: calc(100vh - 64px);
}

.feedback-header {
  @apply text-center mb-8;
}

.feedback-form {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.feedback-textarea {
  :deep(.el-textarea__inner) {
    resize: vertical;
    min-height: 120px;
  }
}

.feedback-upload {
  :deep(.el-upload) {
    width: 100%;
  }
}

.feedback-actions {
  @apply flex justify-center gap-4 mt-8;
}

:deep(.el-form-item__label) {
  @apply font-medium text-gray-700;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  @apply shadow-sm;
}

:deep(.el-button) {
  @apply px-6;
}
</style> 